import React, { Component } from 'react'
import {
  Modal, Text, TouchableHighlight, View, StyleSheet
} from 'react-native'
import Style from '../../utils/style/style';
import WXStyle from '../../utils/style/wxstyle';
export default class MsgModal extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { visible, title, msg, btnValue } = this.props
    return (
      <Modal animationType="fade" onRequestClose={this.props.pressBtn} transparent={true} visible={visible} activeOpacity={0.9}>
        <View style={styles.container}>
          <View style={styles.modalWrap}>
            <View style={styles.innerContainer}>
              {
                this.props.title ?
                  <View style={styles.title}>
                    <Text style={styles.titleTxt}>{title}</Text>
                  </View> : null
              }
              <View style={styles.msg}>
                <Text style={styles.msgTxt}>{msg}</Text>
              </View>
            </View>
            <TouchableHighlight onPress={this.props.pressBtn} style={styles.btn} >
              <Text style={styles.btnValue}>{btnValue ? btnValue : "确定"}</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center'

  },
  modalWrap: {
    borderRadius: 3,
    backgroundColor: '#fff',
    width: Style.width * 0.8,
    alignItems:'center',
    justifyContent:'center'
  },
  innerContainer: {
    paddingLeft: 24,
    paddingRight: 24,
    paddingTop: 20,
  },

  title: {
    alignItems: 'center',
    paddingBottom: 8,
    height: 28,
  },
  titleTxt: {
    fontSize: 16,
    color: '#000'
  },
  msg: {
    alignItems: 'center',
    paddingBottom: 12,
    height:'auto'
  },
  msgTxt: {
    fontSize: 15,
    color: '#999'
  },
  btn: {
    borderColor: '#e5e5e5',
    borderStyle: 'solid',
    borderTopWidth: 1,
    height: 48,
    width: Style.width * 0.8,
    alignItems: 'center',
    justifyContent: 'center'
  },
  btnValue: {
    fontSize: 18,
    color: WXStyle.mainColor
  },
})